<!--  -->
<template>
  <div>
    <el-dialog title="报考" :visible.sync="dialogVisible" width="30%">
      <el-form label-position="80px" size="small">
        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item label="院校">
              <el-input v-model="dialog.collegeName" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="专业">
              <!-- <el-input v-model="dialog.collegeName" /> -->
              <el-select v-model="dialog.majorName">
                <el-option
                  v-for="item in dialog.major"
                  :label="item"
                  :key="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="applySubmit">确 定</el-button>
      </span>
    </el-dialog>
    <div class="box">
      <a-table
        :columns="columns"
        :data-source="tableList"
        :rowKey="(record, index) => record.collegesId"
      >
        <span slot="apply" slot-scope="appply, row, index">
          <el-button type="primary" size="small" @click="apply(row)"
            >申请</el-button
          ></span
        >

        <span slot="collegesId" slot-scope="collegesId"
          >【{{ collegesId }}】</span
        >
        <span slot="pic" slot-scope="pic"
          ><a-avatar :src="'http://127.0.0.1:8080' + pic"
        /></span>

        <span slot="eduType" slot-scope="eduType"
          ><a-tag color="purple">{{ eduType }}</a-tag></span
        >
        <span slot="insCharacter" slot-scope="insCharacter">
          <a-tag
            v-for="tag in computeTags(insCharacter)"
            :key="tag"
            :color="computeColor(tag)"
          >
            {{ tag }}
          </a-tag>
        </span>

        <span slot="fields" slot-scope="fields">
          <a-tag
            v-for="tag in computeTags(fields)"
            :key="tag"
            :color="computeColor(tag)"
          >
            {{ tag }}
          </a-tag>
        </span>
        <!-- <span slot="action" slot-scope="text, record">
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
        </span> -->
      </a-table>
    </div>
  </div>
</template>

<script>
import { suggest } from '@/api/major/major'
import { add } from '@/api/aspiration/aspiration'
export default {
  data() {
    const columns = [
      {
        title: '编号',
        dataIndex: 'collegesId',
        key: 'collegesId',
        scopedSlots: { customRender: 'collegesId' }
      },

      {
        title: '学校',
        dataIndex: 'name',
        key: 'name'
        // slots: { title: 'customTitle' },
        // scopedSlots: { customRender: 'name' }
      },
      {
        title: '图标',
        dataIndex: 'pic',
        key: 'pic',
        scopedSlots: { customRender: 'pic' }
      },
      {
        title: '级别',
        dataIndex: 'insCharacter',
        key: 'insCharacter',
        width: '300px',
        // slots: { title: 'customTitle' },
        scopedSlots: { customRender: 'insCharacter' }
      },
      {
        title: '院校类型',
        dataIndex: 'eduType',
        key: 'eduType',
        scopedSlots: { customRender: 'eduType' }
      },
      {
        title: '专业',
        dataIndex: 'fields',
        key: 'fields',
        width: '500px',
        scopedSlots: { customRender: 'fields' }
      },
      {
        title: '省份',
        dataIndex: 'province',
        key: 'province',
        scopedSlots: { customRender: 'province' }
      },
      {
        title: '2021分数',
        dataIndex: 'num2021',
        key: 'num2021'
      },
      {
        title: '2022分数',
        dataIndex: 'num2022',
        key: 'num2022'
      },
      {
        title: '2023分数',
        dataIndex: 'num2023',
        key: 'num2023'
      },
      {
        title: '填报',
        dataIndex: 'apply',
        key: 'apply',
        scopedSlots: { customRender: 'apply' }
      }
    ]
    return {
      dialog: {
        major: [],
        collegeName: '',
        majorName: '',
        type: ''
      },
      columns,
      pagination: {
        onChange: page => {
          // console.log(page)
        },
        pageSize: 5,
        tableList: [],
        total: 0,
        dialogVisible: false
      }
    }
  },
  methods: {
    applySubmit() {
      // console.log('===')
      if (this.dialog.collegeName && this.dialog.majorName) {
        add({
          userId: JSON.parse(localStorage.getItem('user')).id,
          collage: this.dialog.collegeName,
          field: this.dialog.majorName,
          type: this.dialog.type
        }).then(res => {
          this.$msg.success('添加成功')
          // this.queryData()
          this.dialogVisible = false
        })
      } else {
        this.$msg.error('请选择')
      }
    },
    apply(row) {
      // console.log(row)
      const index = row.insCharacter.indexOf('本科')
      if (index == -1) {
        this.dialog.type = '专科'
      } else {
        this.dialog.type = '本科'
      }
      this.dialog.collegeName = row.name
      this.dialog.major = row.fields.split(',')
      this.dialogVisible = true
    },
    computeColor(color) {
      // console.log(color)
      const len = color.length
      if (len >= 4) {
        return 'orange'
      }
      if (len > 2) {
        return 'green'
      }

      return 'red'
    },
    computeTags(insCharacter) {
      // console.log(insCharacter.split(','))
      return insCharacter.split(',')
    },
    change(curP) {
      this.selectParam.pageNum = curP
      this.suggestCol()
    },
    resort() {
      this.form.insCharacter = ''
      this.form.insType = ''
      this.form.province = ''
      this.form.eduType = ''
    },
    suggestCol() {
      const score = JSON.parse(localStorage.getItem('user')).num
      const param = {
        ...this.form,
        num: score
      }
      suggest(param).then(res => {
        console.log(res.data)
        this.tableList = res.data
      })
    },
    show() {
      this.dialogVisible = true
    },
    isShow(v) {
      console.log(v)
      this.dialogVisible = v
    }
  }
}
</script>

<style scoped></style>
